<template>
  <div>
    <div class="head">
      <div :class="num == 0 ? 'con' : ''" @click="toUpdate">更新</div>
      <div :class="num == 1 ? 'con' : ''" @click="recommend">推荐</div>
      <div :class="num == 2 ? 'con' : ''" @click="schoolboy">男生</div>
      <div :class="num == 3 ? 'con' : ''" @click="girlStudent">女生</div>
      <div :class="num == 4 ? 'con' : ''" @click="end">完结</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    toUpdate() {
      this.num = 0;
      this.$router.push("/homePage/toUpdate");
    },
    recommend() {
      this.num = 1;
      this.$router.push("/homePage/recommend");
    },
    schoolboy() {
      this.num = 2;
      this.$router.push("/homePage/schoolboy");
    },
    girlStudent() {
      this.num = 3;
      this.$router.push("/homePage/girlStudent");
    },
    end() {
      this.num = 4;
      this.$router.push("/homePage/end");
    },
  },
};
</script>

<style lang="less">
.head {
  height: 45px;
  padding: 0 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .con {
    font-size: 24px;
  }
}
</style>